/**
 * @author lulongwen
 * Date: 2023-09-01 21:21
 * Description:
 */

import { memo, useState } from 'react';
import { Handle, Position, NodeResizer } from 'reactflow';
import type { ResizeDragEvent, ResizeParamsWithDirection } from 'reactflow';
import {
  RoundRectangle,
  Circle,
  ArrowRectangle,
  Database,
  Diamond,
  Ellipse,
  Hexagon,
  Parallelogram,
  Triangle,
} from '../shapes';

const initState = {
  width: 100,
  height: 100,
};
const ResizableShape = (props: any) => {
  const { data, selected } = props;
  console.log('props28', props)
  const [resize, setResize] = useState(initState);

  function onResize(e: ResizeDragEvent, params: ResizeParamsWithDirection) {
    // const { width, height } = params;
    // 要减去边框，否则节点会溢出
    // setResize({ ...params, width: width - 2, height: height - 2 });
    setResize(params);
  }

  return (
    <>
      <NodeResizer
        // minWidth={initState.width}
        // minHeight={initState.height}
        color='#ff0071'
        isVisible={selected}
        onResize={onResize}
        // 等比例缩放
        // keepAspectRatio
      />

      <Handle type='target' position={Position.Left} />
      <div className='relative'>
        <Diamond
          width={resize.width}
          height={resize.height}
        />
        <div
          className='flex justify-center items-center absolute w-full h-full top-0 left-0'
        >
          <span className='text-white font-medium text-xs font-mono'>
            {data.label}
          </span>
        </div>
      </div>

      <Handle type='source' position={Position.Right} />
    </>
  );
};

export default memo(ResizableShape);

